<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://lib.baomitu.com/ol3/4.6.5/ol.css">
    <script src="https://lib.baomitu.com/ol3/4.6.5/ol.js"></script>
    <style>
        .ol-zoomslider {
            top: 7.5em
        }
    </style>
</head>

<body>
    <div id="map">

    </div>
</body>
<script>
    const gaode = new ol.layer.Tile({
        title: "高德地图",
        source: new ol.source.XYZ({
            url: 'http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}',
            wrapX: false
        })
    });
    // 初始化地图
    const map = new ol.Map({
        // 将初始化的地图设置到id为map的元素上
        target: "map",
        // 设置图层
        layers: [
            gaode
        ],
        view: new ol.View({
            center: [114.30, 30.50],//中心点 经度、纬度
            zoom: 12,//地图放大级别
            projection: 'EPSG:4326'
        })
    })
    /* 视图跳转控件 */
    const ZoomToExtent = new ol.control.ZoomToExtent({
        extent: [110, 30, 160, 30],
    })
    map.addControl(ZoomToExtent)
    /* 放大缩小控件 */
    const zoomslider = new ol.control.ZoomSlider();
    map.addControl(zoomslider)
    //全屏控件
    const fullScreen = new ol.control.FullScreen();
    map.addControl(fullScreen)
    /* 1、构建要素 */
    var point = new ol.Feature({
        geometry: new ol.geom.Point([114.30, 30.50])//几何信息 坐标
    })
    let style = new ol.style.Style({
        // image属性设置点要素的样式
        image: new ol.style.Circle({
            radius: 10,//点的半径 单位： 度
            fill: new ol.style.Fill({
                color: "#ff2d51"
            }),
            // stroke设置描边 类似于边框
            stroke: new ol.style.Stroke({
                color: "#333",
                width: 2
            })
        })
    })
    point.setStyle(style);
    /* 2、将要素添加到矢量数据源 */
    const source = new ol.source.Vector({
        features: [point]
    })
    /* 3、将矢量数据源添加到矢量图层 */
    const layer = new ol.layer.Vector({
        source
    })
    /* 4、将矢量图层添加到地图容器 */
    map.addLayer(layer)
</script>

</html>